<!-- <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D 矩阵</title>
</head>
<body>
<style>
	.matrix_box {
    width: 150px;
    height: 150px;
    background-color: #a0b3d6;
    box-shadow:2px 2px 4px rgba(0,0,0,.6);
}
</style>
<p id="matrixDetail">目前属性值为：matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</p>
<div id="matrixBox" class="matrix_box"></div>
<p><button id="matrixBtn">随机比例变换</button></p>
<script></script>
<script>
(function() {
    var $ = function(selector) {
        return document.querySelector(selector);
    };
    var $css3Transform = function(element, value) {
        var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;
        for (var i=0; i < length; i+=1) {
            element.style[arrPriex[i] + "Transform"] = value;
        }
    };
    var eleDetail = $("#matrixDetail"),
        eleBtn = $("#matrixBtn"),
        eleBox = $("#matrixBox");
    
    if (eleDetail && eleBtn && eleBox) {
        eleBtn.addEventListener("click", function() {
            var scaleX = Math.random(), scaleY = Math.random(), scaleZ = Math.random();
            // toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
            var valTransform = 'matrix3d('+ scaleX.toFixed(6) +', 0, 0, 0, 0, '+ scaleY.toFixed(6) +', 0, 0, 0, 0, '+ scaleZ.toFixed(6) +', 0, 0, 0, 0, 1)';
            eleDetail.innerHTML = '目前属性值为：' + valTransform;
            调用$css3Transform（ $("#matrixBox")，）
            $css3Transform(eleBox, valTransform);
        });
    }
})();
</script>
</body>
</html>
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D 矩阵</title>
    <style>
        .matrix_box {
            width: 150px;
            height: 150px;
            background-color: #a0b3d6;
        }
    </style>
</head>

<body>

<div id="matrixBox1" class="matrix_box"></div>
<p>
    <button id="matrixButton1" type="button">点击应用matrix(1,0,0,1,30,30)</button>
</p>
<div id="matrixBox2" class="matrix_box"></div>
<p>
    <button id="matrixButton2" type="button">点击应用translate(30,30)</button>
</p>
<script>
    (function () {
        var $ = function (selector) {
            return document.querySelector(selector);
        };
        var $css3Transform = function (element, value) {
            var arrPriex = ["O", "Ms", "Moz", "Webkit", ""], length = arrPriex.length;
            for (var i = 0; i < length; i += 1) {
                element.style[arrPriex[i] + "Transform"] = value;
            }
        };

        if ($ && window.addEventListener) {
            $("#matrixButton1").addEventListener("click", function () {
                $css3Transform($("#matrixBox1"), "matrix(1,0,0,1,30,30)");
            });
            $("#matrixButton2").addEventListener("click", function () {
                $css3Transform($("#matrixBox2"), "translate(30px,30px)");
            });
        } else {
            alert("目前浏览器不支持CSS3 transform, 请试试其他浏览器");
        }
    })();
</script>
</body>
</html>


<!--  transform:matrix(a,b,c,d,e,f)
a , d 是scale的参数　　 scale(sx,sy)可以由matrix(sx,0,0,sy,0,0)运算而来
e , f 是translate的参数　 translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)运算而来，
b , c 是skew的参数　　 skew(θx，θy)可以由matrix(1,tan(θy),tan(θx),1,0,0)运算而来
a, b, c, d 是rotate的参数 rotate(θ)可以有matrix(cosθ,sinθ,-sinθ,cosθ,0,0)运算而来
（一）
translate的x' 和y‘ 分别是新的坐标，scale的的x' 和y‘ 分别是新的width和height
那旋转的矩阵运算得出的x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ
这里的x' 和y' 是什么?
倾斜的矩阵运算得出的x’ = x+y*tan(θx)+0 = x+y*tan(θx)
y’ = x*tan(θy)+y+0 = x*tan(θy)+y
这里的x' 和y' 是什么?
（二）
当transform要同时translate,scale,rotate,skew时，
translate的参数 就是matrix(a,b,c,d,e,f)中的" e , f "
rotate，scale，skew的参数就重叠了，这是如何叠加成matrix(a,b,c,d,e,f)中的” a,b,c,d “的？ 收起
同时旋转缩放位移的时候：

transform: rotate(θ) scale(sx,sy) translate(tx, ty)
transform:matrix(a,b,c,d,e,f) 的六个矩阵值是怎么组合出来的？
是不是transform: matrix(cosθ*sx,sinθ,-sinθ,cosθ*sy,tx,ty) ?

同时旋转缩放倾斜位移的时候：

transform: rotate(θ) scale(sx,sy) skew(θx,θy) translate(tx, ty)
transform:matrix(a,b,c,d,e,f) 的六个矩阵值是怎么组合出来的？
是不是transform: matrix(cosθ*sx,sinθ+tan(θy),-sinθ+tan(θx),cosθ*sy,tx,ty) ? -->
